<!-- 监听窗口变化 -->
<template>
  <div class="resizeEventX" ref="resizeDom">
    <slot :height="newHeight" :width="newWidth"/>
  </div>
</template>

<script setup>
import { ref,onMounted,onBeforeUnmount,onActivated } from 'vue'
defineOptions({name: "resizeEventX"})

const props = defineProps({
  // 双向绑定
  modelValue: {
    type: Object,
    default: {}
  },
  // 顶部保留多少
  top: {
    type: [String, Number],
    default: ''
  },

  // 左边保留多少
  left: {
    type: [String, Number],
    default: ''
  },

})
const emit = defineEmits(['update:modelValue'])

const resizeDom = ref({})

const newHeight = ref(0)
const newWidth = ref(0)

const resizeFn = () => {
  const heightInt = window.innerHeight
  const widthInt = window.innerWidth

  const domTop = resizeDom.value.offsetTop
  const domLeft = resizeDom.value.offsetLeft

  // 减去当前位置，然后减去自定义尺寸
  newHeight.value = heightInt - domTop - (parseInt(props.top) || 0)
  newWidth.value = widthInt - domLeft - (parseInt(props.left) || 0)
  emit("update:modelValue", {
    height: newHeight.value,
    width: newWidth.value
  })
}

onMounted(() => {
  resizeFn()
  window.addEventListener('resize', resizeFn)
})


onBeforeUnmount(() => {
  window.removeEventListener('resize', resizeFn)
})

onActivated(() => {
  resizeFn()
})
</script>

<style scoped lang='scss'>

</style>